<template>
	<view class="main">
		<view class="mt10 box box-tb box-align-start">
			<text style="font-size: 48rpx;font-weight: bold;">忘记密码</text>
			<text style="font-size: 26rpx;color: #AEAFB2;" class="mt10">请在下面输入手机号验证码重新设置密码</text>
		</view>
		<view class="mt50">
			<view class="mt20">
				<u-form :model="form" ref="uForm" label-position="top" :border-bottom="true" label-width="0">
					<u-form-item label="手机号" prop="mobile">
						<u-input v-model="form.mobile" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item label="验证码" prop="code">
						<u-input v-model="form.code" placeholder="请输入验证码" />
						<view class="forget-password">
							<view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
								</u-verification-code>
								<u-button size="mini" @click="getCode">{{tips}}</u-button>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="设置新密码" prop="newPassword">
						<u-input placeholder="请输入新的密码" v-model="form.newPassword" type="password" :password-icon="true">
						</u-input>
					</u-form-item>
					<u-form-item label="再次确认密码" prop="requirePassword">
						<u-input placeholder="请再次确认新的密码" v-model="form.requirePassword" type="password"
							:password-icon="true">
						</u-input>
					</u-form-item>
					<u-button :custom-style="{marginTop:'40rpx'}" type="primary" @click="submit" :disabled="disabled">确定
					</u-button>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
				form: {
					mobile: '',
					code: '',
					newPassword: '',
					requirePassword: ''
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur'],
					}],
					newPassword: [{
						required: true,
						message: '请输入新的密码',
						trigger: ['change', 'blur'],
					}],
					requirePassword: [{
							required: true,
							message: '请再次确认新的密码',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								if (value == "") {
									callback(new Error('请再次确认新的密码'))
								} else if (value != this.form.newPassword) {
									callback(new Error('两次密码不一致'))
								} else {
									callback()
								}
							},
							message: '两次密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				disabled: false,
				checked: false,
				authCode: ''
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.form.mobile == "") return this.$u.toast('手机号不能为空');
				if (!this.$u.test.mobile(this.form.mobile)) return this.$u.toast('手机号不正确');
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.authcode = this.createCode()
						this.$api.post({
							url: '/comm/sendMsg'
						}, {
							mobile: this.form.mobile,
							authCode: this.authcode
						}).then(res => {
							//console.log('><>>' + res)
							if (res == "success") {
								this.$u.toast('验证码已发送');
							} else {
								uni.showToast({
									title: '验证码发送异常，请稍后再试',
									icon: 'none'
								})
							}
						})

						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				console.log(this.form.code, this.authCode, '//////////登录');
				if (this.form.code != this.authcode) {
					this.$u.toast('验证码不正确')
					console.log(1111)
					return
				} else {
					this.$refs.uForm.validate(valid => {
						if (valid) {
							let opt = {
								url: "/resetPasswordByMobile"
							}
							let params = {
								newPassword: this.form.newPassword,
								mobile: this.form.mobile
							}
							this.$api.post(opt, params).then(res => {
								console.log(res);
								this.bindShow = false
								uni.setStorageSync("user", res.user)
								uni.reLaunch({
									url: "/pages/index/index"
								})

								console.log(333)
							})
							console.log(222)
						} else {
							console.log('验证失败');
							this.$refs.uModal.clearLoading();
						}
					});
				}

			},
			//验证码
			createCode() { //生成6位随机数
				var code = '';
				var codeLength = 6;
				var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
				for (var i = 0; i < codeLength; i++) {
					var index = Math.floor(Math.random() * 9);
					code += random[index];
				}
				return code;
			}
		}
	}
</script>

<style lang="scss">
	.main {
		box-sizing: border-box;
		padding: 80rpx;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.nav {
		font-size: 34rpx;
		color: #888F9E;
		border-right: 1px solid #D6DBE7;

		&:first-child {
			padding-right: 24rpx;
		}

		&:last-child {
			padding-left: 24rpx;
			border-right: none;
		}

		&.active {
			color: #626BF1;
		}
	}

	/deep/ .u-form-item {
		position: relative;
		border-bottom: 1px solid #EBEFF8;
	}

	.forget-password {
		position: absolute;
		top: 90rpx;
		right: 0;
		z-index: 1000000;
	}

	.footer {
		margin: 20rpx auto;
		text-align: center;
		width: 100%;
	}

	/deep/.u-checkbox-group .u-checkbox {
		height: auto;
		padding: 0 !important;
	}

	/deep/ .u-checkbox-group {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>